import React, { useState, useCallback, useEffect } from 'react';
import {
    useHistory
} from 'react-router-dom';
import {
    postSofClientFindClient,
    getSofClientDeleteClient
} from '../../../../Api/clientUrl';
import SelectClientManagement from './components/SelectClientManagement';
import AllocationModal from '../../../../components/AllocationModal';
import {
    CompanyClientIndexAll
} from './style';
import { PageHeader, Button, Table, Space, message, Modal } from "antd";
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 客户管理 企业客户 和合作客户 
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-07-13） --解决分页
 */

const CompanyClientIndex = () => {
    const history = useHistory();
    const [modalShow, setModalShow] = useState(false);
    const [listData, setListData] = useState([]);  // list
    const [listTotal, setListTotal] = useState(2); //一共有多少条数据
    const [currentPage, setCurrentPage] = useState(1); // 当前页
    const [size, setSize] = useState(10); //每页条数
    const [selectData, setSelectData] = useState({}) // 搜索条件
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postSofClientFindClient(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setListTotal(data.total);
                    setCurrentPage(parames.currentPage);
                    setSize(parames.size);
                } else {
                    message.error(msg);
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun();
    }, [listFun])
    //添加页面
    const handleAddClient = id => {
        history.push({
            pathname: '/company/client/add', state: {
                clientId: id
            }
        });
    };
    // //详情page
    // const handleEnterClientDetailsPage = (id) => {
    //     history.push('/company/client/details');
    // };
    //分配责任人
    const handleAllocationPeople = (show) => {
        setModalShow(show)
    }
    //删除
    const handleDelete = id => {
        confirm({
            title: '确定要删除当前客户吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ; (async () => {
                    const { code, msg } = await getSofClientDeleteClient({ clientId: id });
                    if (code === '20000') {
                        listFun();
                        message.success('删除成功！')
                    } else {
                        message.error(msg);
                    }
                })();
            }
        });
    }

    const columns = [
        {
            title: '客户名称',
            dataIndex: 'clientName',
            // render: text => <Button type='link' onClick={() => handleEnterClientDetailsPage()}>{text}</Button>
        },
        {
            title: '项目经理',
            dataIndex: 'pm'
        },
        {
            title: '报备人员',
            dataIndex: 'report'
        },
        {
            title: '报备时间',
            dataIndex: 'reportTime'
        },
        {
            title: '来源',
            dataIndex: 'resource'
        },
        {
            title: '信誉度',
            dataIndex: 'trustrank'
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button type='link' onClick={() => handleAddClient(record.id)} >编辑</Button>
                    {/* <Button type = 'link' >标记客户</Button> */}
                    <Button type='link' danger onClick={() => handleDelete(record.id)}>删除</Button>
                </Space>
            ),
        },
    ];
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${listTotal}条`,
        //每页条数
        pageSize: size,
        //当前页数
        current: currentPage,
        //数据总数
        total: listTotal,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size,
            ...selectData
        }
        listFun(parames);
    }
    //搜索
    const handleChangeList = (values) => {
        values.size = size;
        values.currentPage = currentPage;
        listFun(values);
        setSelectData(values)
    }
    //搜索重置
    const handleSelectReset = () => {
        setSelectData({})
        listFun();
    }

    return <CompanyClientIndexAll>
        <PageHeader
            className="site-page-header"
            title={"客户列表"}
            extra={[
                <Button
                    key="1"
                    type="primary"
                    onClick={() => handleAddClient()}
                >
                    客户报备
                </Button>,
            ]}
        ></PageHeader>
        <SelectClientManagement
            handleChangeList={handleChangeList}
            handleSelectReset={handleSelectReset}
        />
        <Table
            dataSource={listData}
            columns={columns}
            pagination={pagination}
            rowKey='id'
        />
        <AllocationModal modalShow={modalShow} handlePeople={handleAllocationPeople} />
    </CompanyClientIndexAll>
}

export default CompanyClientIndex;